<template>
  <div class="mui-pages" style="background-color: #fff;">
    <header class="mui-bar mui-bar-nav">
      <div class="header-common-title flex-justify-start">
        <a @click="fn.back()" href="javascript:void(0)"><img class="back-btn" src="../../../../static/images/back.png"></a>
        <div class="header-search flex-center">组织生活会申请详情</div>
      </div>
    </header>
    <div id="slider" class="mui-slider mui-fullscreen">
      <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <div class="meeting-tab flex-justify-start">
          <a @click="tabIndex=0" :class="{'mui-active':tabIndex==0}" class="mui-control-item" href="javascript:void(0)">会议基本信息</a>
          <a @click="tabIndex=1" :class="{'mui-active':tabIndex==1}" class="mui-control-item" href="javascript:void(0)">附件</a>
        </div>
      </div>
      <div class="mui-slider-group">
        <!-- ---------会议基本信息---------start -->
        <div v-if="tabIndex==0" id="meetingInfo" class="mui-slider-item mui-control-content mui-active">
          <div id="scroll1" class="mui-scroll-wrapper">
            <div class="mui-scroll record-member-lists">
              <ul class="mui-table-view" v-if="data.insPartyMeetingResponseModel">
                <!-- <li class="mui-table-view-cell list-item">
                   <b>标题：</b><span class="mui-pull-right">{{data.insPartyMeetingResponseModel.title}}</span>
                 </li>-->
                <li class="mui-table-view-cell list-item">
                  <b>类型：</b><span class="mui-pull-right">{{data.insPartyMeetingResponseModel.typeLabel}}</span>
                </li>
                <li class="mui-table-view-cell list-item">
                  <b>范围：</b><span class="mui-pull-right">{{data.insPartyMeetingResponseModel.scopeLabel}}</span>
                </li>
                <li class="mui-table-view-cell list-item">
                  <b>主题：</b><span class="mui-pull-right">{{data.insPartyMeetingResponseModel.subject}}</span>
                </li>
                <li class="mui-table-view-cell list-item">
                  <b>创建人：</b><span class="mui-pull-right">{{data.insPartyMeetingResponseModel.createByName }}</span>
                </li>
                <li class="mui-table-view-cell list-item">
                  <b>参与人员：</b><span class="mui-pull-right">{{data.insPartyMeetingResponseModel.attendUserName}} </span>
                </li>
                <li class="mui-table-view-cell list-item">
                  <b>会议时间：</b><span class="mui-pull-right">{{fn.formateYearSecond(data.insPartyMeetingResponseModel.meetTime)}}</span>
                </li>
                <li class="mui-table-view-cell list-item">
                  <b>会议地点：</b><span class="mui-pull-right">{{data.insPartyMeetingResponseModel.address}}</span>
                </li>

                <li class="mui-table-view-cell list-item">
                  <b>主持人：</b><span class="mui-pull-right">{{data.insPartyMeetingResponseModel.compereUserName}} </span>
                </li>
                <li class="mui-table-view-cell list-item">
                  <b>记录人：</b><span class="mui-pull-right">{{data.insPartyMeetingResponseModel.recordEUserName}} </span>
                </li>
                <li class="mui-table-view-cell list-item">
                  <b>审批结果：</b><span v-if="data.opintionType === '不同意'" class="mui-pull-right mine-lists-money">{{data.opintionType}}</span>
                  <span v-if="data.opintionType === '已同意'" class="mui-pull-right work-blue">{{data.opintionType}}</span>
                  <span v-if="data.opintionType === '审批中'" class="mui-pull-right work-blue">申请中</span>
                </li>
                <li v-if="data.opintionType !== '审批中'" class="mui-table-view-cell list-item">
                  <b>审批人：</b><span class="mui-pull-right">{{data.approvalName}}</span>
                </li>
                <li v-if="data.opintionType !== '审批中'" class="mui-table-view-cell list-item">
                  <b>审批意见：</b>
                  <p class="organization-lists-title">{{data.opinion}}</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- ---------会议基本信息---------end -->
        <!-- ---------附件-----------start -->
        <div v-if="tabIndex==1" id="enclosure" class="mui-slider-item mui-control-content">
          <div class="mui-scroll-wrapper">
            <div class="mui-scroll record-member-lists">
              <p class="record-item-title">会议附件：</p>
              <div class="text-center no-data" v-if="files.length===0">
                <img src="../../../../static/images/no_data.png" alt="">
                <p>暂无数据</p>
              </div>
              <ul class="list-item mui-content-padded flex-justify-start" v-if="files">
                <li class="enclosure-upload" v-for="item in getFilePath(files)">
                  <img v-if="isImage(item.fileName)" class="enclosure-upload-file" :src="item.url" @click="showImagePreview(item.url)"/>
                  <img v-if="!isImage(item.fileName)" class="enclosure-upload-file" src="../../../../static/images/up_document.png" @click="downLoadFile(item)" />
                  <p class="mui-ellipsis">{{item.fileName}}</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- ---------附件---------end -->
      </div>
    </div>
  </div>
</template>

<script>
  import footerbar from '../common/footerbar.vue'
  import tools from '@/utils/tools'
  import loginService from '@/service/loginService'
  import api from '@/common/config/api'
  import scheduleSign from '@/components/work/schedule/scheduleSign'
  export default {
    components: {
      footerbar, scheduleSign
    },
    name: '',
    data () {
      return {
        fn: tools,
        data: {},
        tabIndex: 0,
        options: {
          pullUpLoad: true,
          scrollbar: false
        },
        startSignKey: '',
        objectsName: '',
        swipeData: [],
        infinite: true,
        pageIndex: 0,
        editFlag: true,
        recordContent: '暂无数据',
        discussContent: '暂无数据',
        files: [],
        attachmentList: []
      }
    },
    created () {
      this.editFlag = false
      this.loadData()
    },
    methods: {
      getFilePath (arr) {
        arr.map((v) => {
          v.url = api.downLoadFile + v.fileId
          return v
        })
        return arr
      },
      isImage (fileName) {
        let arrExt = fileName.split('.')
        return 'PNG,JPG,JPEG,BMP,GIF'.split(',').indexOf(arrExt[arrExt.length - 1].toUpperCase()) > -1
      },
      edit () {
        this.$store.state.scheduleEditData = this.$store.state.scheduleData
        this.$router.push({path: `/scheduleEdit/${this.$route.params.pkId}`})
      },
      detail (data) {
        this.$store.state.scheduleData = data
        this.$router.push({name: 'scheduleDetail'})
      },
      consult (meetingId) {
        this.$router.push({path: `/scheduleConsult/${meetingId}`})
      },
      onPullingUp () {
        console.log('onPullingUp')
        this.loadData()
      },
      openSignList (signSatus, meetingId) {
        this.$router.push({'path': `/scheduleSignPeople/${signSatus}/${meetingId}`})
      },
      loadData () {
        let data = {
          partyMeetingId: this.$route.params.pkId,
          approvalLogId: this.$route.params.approvalLogId
        }
        loginService.getPartyMeetingApprovalLogInfo(data).then((res) => {
          if (res.code !== 200) {
            return tools.tip(res.describe === '未查询到资源' ? '已无更多数据' : res.describe)
          }
          this.data = res.data
          if (this.data.insPartyMeetingResponseModel.discussContent) {
            this.discussContent = this.data.insPartyMeetingResponseModel.discussContent
          }
          if (this.data.insPartyMeetingResponseModel.recordContent) {
            this.recordContent = this.data.insPartyMeetingResponseModel.recordContent
          }
          if (this.data.insPartyMeetingResponseModel.noticeFile && this.data.insPartyMeetingResponseModel.noticeFile !== '') {
            this.files = JSON.parse(this.data.insPartyMeetingResponseModel.noticeFile)
          }
          if (this.data.insPartyMeetingResponseModel.resultFile && this.data.insPartyMeetingResponseModel.resultFile !== '') {
            this.attachmentList = JSON.parse(this.data.insPartyMeetingResponseModel.resultFile)
          }
          console.log("files=", this.files)
          console.log("this.files.length=" , this.files.length)
          this.startSignKey = new Date().getTime()
        })
      },
      showImagePreview (url) {
        if (url.length < 1) {
          return false
        }
        let imgs = [url]
        this.$createImagePreview({
          initialIndex: 0,
          imgs: imgs
        }, (h) => {
          return h('div', {
            class: {
              'image-preview-custom-header': false
            },
            slot: 'header'
          }, '')
        }).show()
      },
      getRecord (record) {
        if (!record || record.length === 0) {
          return "暂无数据"
        } else {
          return record
        }
      },
      downLoadFile (item) {
        console.log("item={}", item)
        if (window.android && window.android.downloadFile) {
          window.android.downloadFile(item.url, item.fileName)
        }
      },
      hasRole () {
        let roleType = this.$store.state.roleType || ''
        let flag = tools.hasRoleType(roleType)
        console.log("flag=", flag)
        return flag
      },
      status (status, isEqual) {
        if (this.data.insPartyMeetingResponseModel) {
          if (isEqual && this.data.insPartyMeetingResponseModel.status === status) {
            return true
          } else if (!isEqual && this.data.insPartyMeetingResponseModel.status !== status) {
            return true
          }
        }
        return false
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
</style>
